<template>
  <div class="backup-recovery-container">
    <div class="page-header">
      <div class="title">备份恢复系统</div>
      <div class="subtitle">多层备份 · 快速恢复</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/electronic-archive"><LaptopOutlined />电子档案管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><CloudUploadOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="stats-section">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <div class="stat-card">
            <CloudUploadOutlined class="stat-icon" />
            <div>
              <div class="stat-title">备份任务</div>
              <div class="stat-value">{{ stats.backupTasks }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <HistoryOutlined class="stat-icon" />
            <div>
              <div class="stat-title">恢复记录</div>
              <div class="stat-value">{{ stats.recoveryRecords }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <DatabaseOutlined class="stat-icon" />
            <div>
              <div class="stat-title">备份容量</div>
              <div class="stat-value">{{ stats.backupSize }}TB</div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card">
            <CheckCircleOutlined class="stat-icon" />
            <div>
              <div class="stat-title">成功率</div>
              <div class="stat-value">{{ stats.successRate }}%</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="backup-management">
      <a-row :gutter="[24, 24]">
        <a-col :span="12">
          <a-card title="备份策略" :bordered="false">
            <div class="backup-strategy">
              <div class="strategy-item">
                <div class="strategy-name">全量备份</div>
                <div class="strategy-schedule">每周日 02:00</div>
                <a-switch checked />
              </div>
              <div class="strategy-item">
                <div class="strategy-name">增量备份</div>
                <div class="strategy-schedule">每天 03:00</div>
                <a-switch checked />
              </div>
              <div class="strategy-item">
                <div class="strategy-name">实时备份</div>
                <div class="strategy-schedule">变更时触发</div>
                <a-switch />
              </div>
            </div>

            <div class="backup-actions" style="margin-top: 16px">
              <a-space>
                <a-button type="primary">立即备份</a-button>
                <a-button>编辑策略</a-button>
              </a-space>
            </div>
          </a-card>
        </a-col>

        <a-col :span="12">
          <a-card title="备份存储" :bordered="false">
            <div class="storage-locations">
              <div class="location-item">
                <div class="location-info">
                  <div class="location-name">本地存储</div>
                  <div class="location-path">/data/backup/local</div>
                </div>
                <a-tag color="green">在线</a-tag>
              </div>
              <div class="location-item">
                <div class="location-info">
                  <div class="location-name">云端备份</div>
                  <div class="location-path">cloud://backup.underworld.gov</div>
                </div>
                <a-tag color="green">在线</a-tag>
              </div>
              <div class="location-item">
                <div class="location-info">
                  <div class="location-name">异地容灾</div>
                  <div class="location-path">remote://disaster.backup.site</div>
                </div>
                <a-tag color="orange">同步中</a-tag>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="backup-tasks">
      <a-card title="备份任务" :bordered="false">
        <a-table :columns="taskColumns" :data-source="backupTasks" :pagination="{ pageSize: 10 }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
            </template>
            <template v-if="column.key === 'progress'">
              <a-progress :percent="record.progress" size="small" />
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small">查看</a-button>
                <a-button size="small">恢复</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>

    <div class="recovery-tools">
      <a-card title="快速恢复" :bordered="false">
        <a-form layout="inline">
          <a-form-item label="恢复时间点">
            <a-date-picker show-time />
          </a-form-item>
          <a-form-item label="恢复范围">
            <a-select style="width: 200px" placeholder="选择恢复范围">
              <a-select-option value="all">全部数据</a-select-option>
              <a-select-option value="specific">指定文件</a-select-option>
              <a-select-option value="database">数据库</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary">开始恢复</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { HomeOutlined, FolderOutlined, LaptopOutlined, CloudUploadOutlined, HistoryOutlined, DatabaseOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'

const stats = reactive({
  backupTasks: 156,
  recoveryRecords: 89,
  backupSize: 356.8,
  successRate: 99.9
})

const taskColumns = [
  { title: '任务ID', dataIndex: 'id', key: 'id' },
  { title: '备份类型', dataIndex: 'type', key: 'type' },
  { title: '数据量', dataIndex: 'size', key: 'size' },
  { title: '进度', key: 'progress' },
  { title: '状态', key: 'status' },
  { title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
  { title: '操作', key: 'action', width: 150 }
]

const backupTasks = ref([
  { id: 'BK20231201001', type: '全量备份', size: '256GB', progress: 100, status: '已完成', startTime: '2023-12-01 02:00:00' },
  { id: 'BK20231201002', type: '增量备份', size: '12GB', progress: 85, status: '进行中', startTime: '2023-12-01 03:00:00' },
  { id: 'BK20231130001', type: '全量备份', size: '245GB', progress: 100, status: '已完成', startTime: '2023-11-30 02:00:00' }
])

const getStatusColor = (status) => {
  const colorMap = {
    已完成: 'success',
    进行中: 'processing',
    等待中: 'default',
    失败: 'error'
  }
  return colorMap[status] || 'default'
}
</script>

<style lang="scss" scoped>
.backup-recovery-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .stats-section,
  .backup-management,
  .backup-tasks,
  .recovery-tools {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      display: flex;
      align-items: center;
      gap: 12px;

      .stat-icon {
        font-size: 32px;
        color: $secondary-color;
      }

      .stat-title {
        font-size: 14px;
        color: $text-secondary;
        margin-bottom: 4px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: $primary-color;
      }
    }

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  .backup-strategy {
    .strategy-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .strategy-name {
        font-weight: bold;
        color: $primary-color;
      }

      .strategy-schedule {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }

  .storage-locations {
    .location-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .location-info {
        .location-name {
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .location-path {
          font-size: 12px;
          color: $text-secondary;
          font-family: monospace;
        }
      }
    }
  }
}
</style>
